<!DOCTYPE html>
<html lang="en">

<head>

    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- 自定义字体-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!-- 自定义样式-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="angularjs/pagination.css">
    <link rel="stylesheet" href="layui/css/layui.css">

    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="bootstrap/js/jquery-cookie/jquery.cookie.js"></script>

    <!--引入angularJS框架-->
    <script src="angularjs/angular.min.js"></script>
    <!--引入angularJS的分页框架-->
    <script src="angularjs/pagination.js"></script>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <!--自己写的js-->
    <script>

        //登录提交验证方法；
        var app = angular.module("myapp", []);
        app.controller("mylogin", function ($scope, $http) {
            $scope.token = "";
            $scope.userid = "";
            $scope.userrloe = "";
            $scope.SetCookie = function() {
                $.cookie("customCheck",$scope.customCheck,{expires: 1});    //保存是否选择记住密码，保存时间为1天
                $.cookie("userphone",$scope.userphone,{expires: 1});
                if ($scope.customCheck) {
                    $.cookie("userpwd",$scope.userpwd,{expires: 1});    //保存密码，保存时间为1天
                } else {
                    $.cookie("userpwd","",{expires: 1});        //不保存密码
                }
                var exp = new Date();
                exp.setTime(exp.getTime() + 1000*60*60*2);
                $.cookie("stock_user_id",$scope.userid,{path:'/',expires: exp});    //保存userid到cookie保存时间为2小时
                $.cookie("stock_user_role",$scope.userrole,{path:'/',expires: exp});
                /**
                 * 后面操作需要获取userid则添加该代码，需要script引入bootstrap/js/jquery-cookie/jquery.cookie.js
                 * $scope.userid = $.cookie("stock_user_id");
                 */
            };
            $scope.GetCookie = function () {
                $scope.userphone = $.cookie("userphone");
                $scope.userpwd = $.cookie("userpwd");
                $scope.customCheck = $.cookie("customCheck")=="true"||$.cookie("customCheck")==true?true:false;
            };
            $scope.GetCookie();

            $scope.getlogin = function () {
                if($scope.userphone.trim() == "") {
                    layer.tips("请输入手机号", "#userphone", {tips: [3, "red"], time: 1500});
                    return;
                }
                if($scope.userpwd.trim() == "") {
                    layer.tips("请输入密码", "#userpwd", {tips: [3, "red"], time: 1500});
                    return;
                }
                $http.post("/users/login", {
                    "userphone": $scope.userphone,
                    "userpwd": $scope.userpwd
                }).success(function (data) {
                    if (data.code == 1) {
                        /**
                         * 获取tiken
                         */
                        $scope.token = data.data[0];
                        /**
                         * 获取usesrid
                         */
                        $scope.userid = data.data[1];
                        $scope.userrole = data.data[2];

                        layer.msg(data.msg, {icon: 6});
                        /**
                         * 将数据保存到Cookie
                         */
                        $scope.SetCookie();

                        setTimeout(function () {
                            /**
                             * 跳转到index.html并将token和userid传过去！
                             * @type {string}
                             */
                          location.href = "index.html?id=" + $scope.userid + "&token=" + $scope.token;
                        }, 800)
                    } else if (data.code == 0){
                        layer.msg(data.msg, {icon: 2});
                    } else {
                        layer.msg("加载失败，请刷新重试！", {icon: 2});
                    }
                }).error(function (data) {
                    layer.msg("加载失败，请刷新重试！", {icon: 2});
                })
            }
        });

        // //正则表达式判断手机号码是否正确
        function checkPhone() {
            var userphone = document.getElementById('userphone').value;
            if (!(/^1[3456789]\d{9}$/.test(userphone))) {
                document.getElementById('userphone').value = "";
                layer.tips("请输入正确的手机号", "#userphone", {tips: [3, "red"], time: 1500});
                return false;
            }
        }

        function checkPwd() {
            var userpwd = document.getElementById('userpwd').value;
            if (userpwd == "") {
                layer.tips("密码不能为空", "#userpwd", {tips: [3, "red"], time: 1500});
                return false;
            }
        }
    </script>

    <style>
        .container {
            padding-top: 50px;
        }
    </style>
</head>
<body class="bg-gradient-primary">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-lg-6 d-none d-lg-block"><img src="img/stockLogin.jpg" style="width: 100%;height: 100%"></div>
                        <div class="col-lg-6">
                            <div class="p-5">
                                <div class="text-center">
                                    <h1 class="h4 text-gray-900 mb-4">欢迎登录</h1>
                                </div>
                                <form class="user" action="" ng-app="myapp" ng-controller="mylogin" onLoad="$('#userphone').focus();" >
                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="userphone"
                                               name="userphone" ng-model="userphone" aria-describedby="emailHelp"
                                               onblur="checkPhone()" ng-change="customCheck=false;userpwd=''" placeholder="手机号">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-user" id="userpwd"
                                               name="userpwd" ng-model="userpwd" placeholder="密码" onblur="checkPwd()">
                                    </div>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox small">
                                            <input type="checkbox" class="custom-control-input" id="customCheck" ng-model="customCheck">
                                            <label class="custom-control-label" for="customCheck">记住密码</label>
                                        </div>
                                    </div>
                                    <button id="loginBtn" class="layui-btn btn-block"
                                            style="font-size: 16px; border-radius: 10rem;background-color: #224ABE"  ng-click="getlogin()">
                                        登录
                                    </button>
                                    <a href="javascript:" id="getFocusA"> </a>
                                    <script>
                                        $("#loginBtn").focus(function () {
                                            $("#getFocusA").focus();
                                        });
                                    </script>
                                </form>
                                <hr>
                                <div>
                                    <a style="float: left" href="register.html">先去注册</a><a style="float: right" href="password.html">忘记密码</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="text-right text-gray-600">金证证券在线交易中心</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>

</body>
</html>